<template>
  <div class="file-manager-container">
    <!-- 搜索区域 -->
    <el-form :inline="true" :model="searchForm">
      <el-form-item label="批次号">
        <el-input v-model="searchForm.batchNumber" placeholder="输入批次号" clearable />
      </el-form-item>
      <el-form-item label="文件名称">
        <el-input v-model="searchForm.fileName" placeholder="输入文件名称" clearable />
      </el-form-item>
      <el-form-item label="状态" style="width: 150px;">
        <el-select v-model="searchForm.status" placeholder="选择状态" clearable>
          <el-option label="全部" value="" />
          <el-option label="处理中" value="1" />
          <el-option label="处理完成" value="2" />
          <el-option label="失败" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table
      :data="filteredData"
      style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" align="center"/>
      <el-table-column prop="batchNumber" width="200" label="批次号" align="center"/>
      <el-table-column prop="fileName" width="250" label="文件名称" align="center"/>
      <el-table-column prop="fileRowCount" label="行数" align="center"/>
      <el-table-column prop="downloadCount" label="下载次数" align="center"/>
      <el-table-column prop="status" label="状态" align="center">
        <template #default="{row}">
          <!-- row.status 1:处理中 warning 2:处理完成 success 3:失败  danger-->
          <el-tag :type="row.fileStatus === '1' ? 'warning' : row.fileStatus === '2' ? 'success' : 'danger'">
            {{ row.fileStatus === '1' ? '处理中' : row.fileStatus === '2' ? '处理完成' : '失败' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"/>
      <el-table-column label="操作" fixed="right" align="center" width="250">
        <template #default="{row}">
          <!-- 根据fileStatus判断等于3失败的时候 才显示查看失败原因 -->
          <el-button v-if="row.fileStatus === '3'" link type="primary" icon="View" @click="handleExtension(row)">查看失败原因</el-button> 
          <el-button v-if="row.fileStatus === '2'" link type="primary" icon="Download" @click="handleDownload(row)">下载</el-button>
          <el-button v-if="row.fileStatus === '2'" link type="primary" icon="Delete" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
      </el-pagination>

    <!-- 查看失败原因的弹窗 -->
    <el-dialog title="查看失败原因" v-model="dialogExtensionVisible">
      <p>失败原因：{{ extension }}</p>
      <template #footer>
            <div class="dialog-footer">
               <el-button @click="dialogExtensionVisible = false">关 闭</el-button>
            </div>
         </template>
    </el-dialog>
  </div>
</template>

<script setup name="fileManager">
import { list, deleteById } from "@/api/filemanage/filecentre/filecentre";
import { ElMessageBox } from 'element-plus';
const { proxy } = getCurrentInstance();
// 模拟数据
const filteredData = ref([]);


// 搜索表单
const searchForm = ref({
  batchNumber: '',
  fileName: '',
  status: '',
  pageNum: 1,
  pageSize: 10
})

// 分页配置
const pagination = ref({
  current: 1,
  size: 10,
  total: 0
})

// 失败原因弹窗
const dialogExtensionVisible = ref(false);
const extension = ref('');

// 查看失败原因
function handleExtension(row) {
  extension.value = row.extension;
  dialogExtensionVisible.value = true;
}

// 搜索
const handleSearch = () => {
  pagination.value.current = 1
  getList();
}

// 重置搜索
const resetSearch = () => {
  searchForm.value = {
    batchNumber: '',
    fileName: '',
    status: '',
    pageNum: 1,
    pageSize: 10
  }
  pagination.value.current = 1;
  getList();
}

// 下载文件
const handleDownload = async (row) => {
  try {
    // 等待文件下载完成
    await proxy.$download.csv("/file/download/record/download/" + row.id, row.fileName);
    // 文件下载完成后刷新表格
    getList();
  } catch (error) {
    // 处理下载失败的情况
    proxy.$modal.msgError('文件下载失败');
  }
}

// 删除文件
const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除此文件吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteById(row.id).then((res) => {
      if (res.code === 200) {
        proxy.$modal.msgSuccess('删除成功');
        getList();
      } 
    })
  })
}

// 分页变化
const handlePageChange = () => {
  // 在Vue 3中，由于我们使用v-model绑定，不需要手动更新current page

}

function getList() {
  searchForm.value.pageNum = pagination.value.current;
  searchForm.value.pageSize = pagination.value.size;
  list(searchForm.value).then((res) => {
    if (res.code === 200) {
      filteredData.value = res.rows;
      pagination.value.total = res.total;
    }
  })
}

getList();

function handleSizeChange(size) {
    pagination.value.size = size;
    getList();
}

function handleCurrentChange(current) {
    pagination.value.current = current;
    getList();
}
</script>

<style scoped>
.file-manager-container {
  padding: 20px;
}

.filter-area {
  margin-bottom: 20px;
}

.el-pagination {
  margin-top: 20px;
  justify-content: flex-end;
}

.el-table {
  margin-top: 20px;
}
</style>